<template>
  <div class="mod-config">
    <el-form class="verify-form" :model="dataForm" ref="dataForm" label-width="90px" v-if="infoVisible">
    <el-row>
      <el-col :span="8">
        <el-form-item label="配镜单号" prop="saleBillId">
          <el-input v-model="dataForm.saleBillId" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属部门" prop="deptName" >
          <el-input v-model="dataForm.deptName" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="加工要求" prop="workRequest" >
          <el-input v-model="dataForm.workRequest" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="顾客姓名" prop="customerName">
          <el-input v-model="dataForm.customerName" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系电话" prop="customerPhone">
          <el-input v-model="dataForm.customerPhone" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="关联顾客卡" prop="customerCard">
          <el-input  v-model="dataForm.customerCard" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="加工师" prop="workUserName">
          <el-input v-model="dataForm.workUserName" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检验员" prop="checkUserName">
          <el-input v-model="dataForm.checkUserName" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="配送地点" prop="takeMirroDeptName">
          <el-input  v-model="dataForm.takeMirroDeptName" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="memo">
          <el-input type="textarea" v-model="dataForm.memo" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="center" >视光详情</el-divider>
              <table class="miui-table" v-if="infoVisible">
                <tr>
                  <th>右眼(R)/左眼(L)</th>
                  <th>子午面</th>
                  <th>球镜</th>
                  <th>柱镜</th>
                  <th>轴向</th>
                  <th colspan='2'>斜视</th>
                  <th>add</th>
                  <th>瞳距</th>
                  <th>瞳高</th>
                  <th>商品名称</th>
                </tr>
                <tr>
                  <td rowspan='4'>R</td>
                  <td>主子午面一</td>
                  <td>{{dataForm.cokeBallGlassOd}}</td>
                  <td>{{dataForm.cokePostGlassOd}}</td>
                  <td>{{dataForm.cokeAxesOd}}</td>
                  <td colspan='2'>视光类</td>
                  <td>{{dataForm.cokeAddOd}}</td>
                  <td>{{dataForm.cokePupilDistanceOd}}</td>
                  <td>{{dataForm.cokePupilHighOd}}</td>
                  <td rowspan='4'>{{dataForm.rightViewGoodsName}}</td>
                </tr>
                <tr>
                  <td>焦度计</td>
                  <td>{{dataForm.vertometerBallGlassOd}}</td>
                  <td>{{dataForm.vertometerPostGlassOd}}</td>
                  <td>{{dataForm.vertometerAxesOd}}</td>
                  <td rowspan='3' colspan='2'>
                    <el-row>
                      <el-col :span="12">
                        三棱镜：
                      </el-col>
                      <el-col :span="12">
                        {{dataForm.cokeArriseGlassOd}}
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        基底：
                      </el-col>
                      <el-col :span="12">
                        {{dataForm.cokeBasisOd}}
                      </el-col>
                    </el-row>
                  </td>
                  <td rowspan='3'>{{dataForm.vertometerAddOd}}</td>
                  <td rowspan='3'>{{dataForm.vertometerPupilDistanceOd}}</td>
                  <td rowspan='3'>{{dataForm.vertometerPupilHighOd}}</td>
                </tr>
                <tr>
                  <td>主子午面二</td>
                  <td>{{dataForm.cokeBallGlassOd2}}</td>
                  <td>{{dataForm.cokePostGlassOd2}}</td>
                  <td>{{dataForm.cokeAxesOd2}}</td>
                </tr>
                <tr>
                  <td>焦度计</td>
                  <td>{{dataForm.vertometerBallGlassOd2}}</td>
                  <td>{{dataForm.vertometerPostGlassOd2}}</td>
                  <td>{{dataForm.vertometerAxesOd2}}</td>
                </tr>
                <tr>
                  <td rowspan='4'>L</td>
                  <td>主子午面一</td>
                  <td>{{dataForm.cokeBallGlassOs}}</td>
                  <td>{{dataForm.cokePostGlassOs}}</td>
                  <td>{{dataForm.cokeAxesOs}}</td>
                  <td colspan='2'>视光类</td>
                  <td>{{dataForm.cokeAddOs}}</td>
                  <td>{{dataForm.cokePupilDistanceOs}}</td>
                  <td>{{dataForm.cokePupilHighOs}}</td>
                  <td rowspan='4'>{{dataForm.leftViewGoodsName}}</td>
                </tr>
                <tr>
                  <td>焦度计</td>
                  <td>{{dataForm.vertometerBallGlassOs}}</td>
                  <td>{{dataForm.vertometerPostGlassOs}}</td>
                  <td>{{dataForm.vertometerAxesOs}}</td>
                  <td rowspan='3' colspan='2'>
                    <el-row>
                      <el-col :span="12">
                        三棱镜：
                      </el-col>
                      <el-col :span="12">
                        {{dataForm.cokeArriseGlassOs}}
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        基底：
                      </el-col>
                      <el-col :span="12">
                        {{dataForm.cokeBasisOs}}
                      </el-col>
                    </el-row>
                  </td>
                  <td rowspan='3'>{{dataForm.vertometerAddOs}}</td>
                  <td rowspan='3'>{{dataForm.vertometerPupilDistanceOs}}</td>
                  <td rowspan='3'>{{dataForm.vertometerPupilHighOs}}</td>
                </tr>
                <tr>
                  <td>主子午面二</td>
                  <td>{{dataForm.cokeBallGlassOs2}}</td>
                  <td>{{dataForm.cokePostGlassOs2}}</td>
                  <td>{{dataForm.cokeAxesOs2}}</td>
                </tr>
                <tr>
                  <td>焦度计</td>
                  <td>{{dataForm.vertometerBallGlassOs2}}</td>
                  <td>{{dataForm.vertometerPostGlassOs2}}</td>
                  <td>{{dataForm.vertometerAxesOs2}}</td>
                </tr>
                <tr>
                  <td>镜架</td>
                  <td colspan="9">
                    {{dataForm.frameName}}
                  </td>
                </tr>
              </table>
    <table class="miui-table" v-if="infoVisible">
      <tr>
        <th>光心垂差</th>
        <th>光心高度描述</th>
        <th>色泽互差描述</th>
        <th>装配质量描述</th>
        <th>整形描述</th>
      </tr>
      <tr>
        <td>{{dataForm.cokeCenterVertical}}</td>
        <td>{{dataForm.centerHigh}}</td>
        <td>{{dataForm.color}}</td>
        <td>{{dataForm.quality}}</td>
        <td>{{dataForm.shape}}</td>
      </tr>
    </table>
    
    </el-form>
    <el-row v-if="noInfoVisible" style="text-align: center;color: red;"> 该销售单未检验 </el-row>
  </div>
</template>

<script>
    import {getCheckInfoBySaleId} from '@/api/eims/formalInspect'

    import {mapGetters} from 'vuex'

    export default {
    data () {
      return {
        visible: false,
        infoVisible: true,
        noInfoVisible: false,
        dataForm: {
          id: 0,
          saleId: '',
          saleBillId: '',
          cokeBallGlassOd: '',
          cokeBallGlassOd2: '',
          vertometerBallGlassOd: '',
          vertometerBallGlassOd2: '',
          cokeBallGlassOs: '',
          cokeBallGlassOs2: '',
          vertometerBallGlassOs: '',
          vertometerBallGlassOs2: '',
          cokePostGlassOd: '',
          cokePostGlassOd2: '',
          vertometerPostGlassOd: '',
          vertometerPostGlassOd2: '',
          cokePostGlassOs: '',
          cokePostGlassOs2: '',
          vertometerPostGlassOs: '',
          vertometerPostGlassOs2: '',
          cokeAxesOd: '',
          cokeAxesOd2: '',
          vertometerAxesOd: '',
          vertometerAxesOd2: '',
          cokeAxesOs: '',
          cokeAxesOs2: '',
          vertometerAxesOs: '',
          vertometerAxesOs2: '',
          cokeArriseGlassOd: '',
          cokeArriseGlassOs: '',
          cokeBasisOd: '',
          cokeBasisOs: '',
          cokeAddOd: '',
          vertometerAddOd: '',
          cokeAddOs: '',
          vertometerAddOs: '',
          cokePupilDistanceOd: '',
          vertometerPupilDistanceOd: '',
          cokePupilDistanceOs: '',
          vertometerPupilDistanceOs: '',
          cokeCenterVertical: '',
          centerHigh: '',
          color: '',
          quality: '',
          shape: '',
          workDeptId: '',
          workUserName: '',
          checkUserName: '',
          memo: ''
        },
      }
    },
    computed:{
      ...mapGetters(['permissions','userInfo']),
    },
    methods: {
      init (saleId) {
        this.visible = true
        this.$nextTick(() => {
          if(this.infoVisible){
            this.$refs['dataForm'].resetFields()
          }
          this.dataListLoading = true
          getCheckInfoBySaleId(saleId).then(response => {
            if(response.data.code == '0'){
              this.infoVisible = true;
              this.noInfoVisible = false;
              this.dataForm = response.data.data
              this.dataForm.cokeBasisOd = this.getChange(response.data.data.cokeBasisOd)
              this.dataForm.cokeArriseGlassOd = this.getChange(response.data.data.cokeArriseGlassOd)
              this.dataForm.cokeBasisOs = this.getChange(response.data.data.cokeBasisOs)
              this.dataForm.cokeArriseGlassOs = this.getChange(response.data.data.cokeArriseGlassOs)
            }else{
              this.infoVisible = false
              this.noInfoVisible = true
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false
          })
        })
      },
      getChange(index){
        let test = '' 
        switch (index) {
          case 1:
            test = '内'
            break;
          case 2:
            test = '外'
            break;
          case 3:
            test = '上'
            break;
          case 4:
            test = '下'
            break;
        }
        return test;
      }
    }
  }
</script>

<style lang="scss" scoped>
.miui-table {
  width: 100%;
}
  .miui-table tr>th,.miui-table tr>td {
    border: solid 1px #e7e7e7;
    background-color: #ecf5ff;
    padding: 3px 5px;
    text-align: center;
  }
</style>
